<template>
    <Form  label-position="left" :label-width="58" :label-height="58" style="margin-top: 20px;">

        <Form-item v-bind:label="LeftTitle" class="clearfix">

            <Row >
                <Col span="24"  >

                <div class="demo-upload-list" v-for="item in uploadList" style="float:left">
                    <!-- <template v-if="item.status === 'finished'"> -->
                        <img :src="'//api.leson-medical.com/api/'+ item.url">
                        <!-- <div>{{item}}</div> -->
                        <div class="demo-upload-list-cover">
                            <Icon type="ios-eye-outline" @click.native="handleView(baseURL+item.url)"></Icon>
                            <!-- <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon> -->
                        </div>
                    <!-- </template> -->
                    <!-- <template v-else>
                        <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                    </template> -->
                </div>
                

                <Upload

                        ref="upload"
                        name="file"
                        :headers="uploadHeaders"
                        :show-upload-list="false"
                        :default-file-list="defaultList"
                        :on-success="handleSuccess"
                        :format="['jpg','jpeg','png']"
                        :max-size="10240"
                        :on-format-error="handleFormatError"
                        :on-exceeded-size="handleMaxSize"
                        :before-upload="handleBeforeUpload" 
                        type="drag"
                        action="//api.leson-medical.com/api/h5api/upload"
                        style="display: inline-block;width:58px;float:left">
                    <div style="width: 58px;height:58px;line-height: 58px;">
                        <Icon type="camera" size="20" ></Icon>
                    </div>
                </Upload>
               

                <Modal title="查看图片" v-model="visible">
                    <img :src="'http://api.leson-medical.com/api/' + imgName + '/large'" v-if="visible" style="width: 100%">
                </Modal>
                <Modal title="上传完成" v-model="remarkVisible"  @on-ok="addRamark" style="z-index:999">
                    <input type="text" v-model="remarkContent" placeholder="请添加上传文件的备注"></input>
                </Modal>
                </Col>

            </Row>

        </Form-item>
 
    </Form>

</template>
<script>
import vuex_store from '../js/vuex-store'

    export default {

        data () {
            return {
                baseURL: baseURL,
                uploadHeaders:{},
                imgName: '',
                visible: false,
                uploadList: [],
                remarkVisible:false,
                remarkContent:""
            }
        },methods:{
         
                
       
        //为图片添加备注
        addRamark(){
            console.log(this.remarkContent)
        },
        handleView (url) {

            // location.href = url;
            var image = new Image();
            image.src = url;
            const width = image.width;
            this.$Modal.info({
            width: width,
            okText: "关闭",
            render: (h) => {
              return h('img', {
                on: {
                  input: (val) => {
                    this.value = val;
                  }
                },
                attrs: {
                  src: url,
                  width: "100%"
                },
              })
            }
            });
            // this.imgName = name;
            // this.visible = true;
        },
        handleRemove (file) {
            // 从 upload 实例删除数据
            alert("删除操作")
            const fileList = this.$refs.upload.fileList;
            this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);

        },
        handleSuccess (res, file) {
             console.log("添加成功")
             this.$Message.destroy()
            this.$Message.success('上传完成!')
            
            // 因为上传过程为实例，这里模拟添加 url
             file.url =  res.data.url;
             file.name = res.data.url;
             file.created_at = res.data.created_at;

             this.$emit("handleSuccess",res,file,this.selectType,this.type)
        },
        handleFormatError (file) {
            this.$Notice.warning({
                title: '文件格式不正确',
                desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
            });
        },
        handleMaxSize (file) {
            this.$Notice.warning({
                title: '超出文件大小限制',
                desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
            });
        },
        handleBeforeUpload () {
            this.$Message.loading({
                    content: '正在上传中...请稍后',
                    
            });
            // setTimeout(msg, 3000);


            //this.remarkVisible = true;
            const check = this.uploadList.length < 8;
            if (!check) {
                this.$Notice.warning({
                    title: '最多只能上传 8 张图片。'
                });
            }
            return check;
        }
          }, mounted () {
            this.uploadList = this.$refs.upload.fileList;
        },props: ['defaultList','LeftTitle','selectType','type'],
        watch:{
            defaultList:{
                handler:function(defaultList){
                        // this.$set(this.uploadList)

                        this.uploadList = defaultList;
                        

                 },
                deep:true  
            }
        },
        created: function () {

        //初始化
            this.uploadHeaders = {
                "Authorization":"Bearer " +vuex_store.getters.getUserToken,
                "codetoken":vuex_store.getters.getAuth
            }
            // console.log(this.uploadHeaders)
        
        }

    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>   /*  scoped的意思是这里的样式只对当前页面有效不会影响其他页面，还有可以设置lang="scss"就是支持css预编译，也就是支持sass或者less  */
.demo-upload-list{
    display: inline-block;
    width: 58px;
    height: 58px;
    /*text-align: left;*/
    line-height: 58px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 2px;
}
.demo-upload-list img{
    width: 100%;
    height: 100%;
}
.demo-upload-list-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
    display: block;
}
.demo-upload-list-cover i{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}
.upload-body{
    text-align: left;
}

</style>